<template>
	<div class="userHomework w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}的课程列表</p>
		</div>
		<div class="el-tabs-report">
			<a class="listTwo advise" @click="userLubo" style="margin-left: 0;">录播课程</a>
			<a class="listTwo advise" @click="userLive">直播课程</a>
			<a class="listTwo advise" @click="knowMap">知识地图</a>
			<a class="listOne" style="margin-left: 10px;">学员作业</a>
			<a class="listTwo advise" @click="userTask">学习任务</a>
		</div>
		<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
			<el-table-column label="序号" width="55">
				<template slot-scope="scope">{{ scope.row.sort}}</template>
			</el-table-column>
			<el-table-column prop="name" label="作业名称"></el-table-column>
			<el-table-column label="属性" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.homeworkType=='1-1'">视频作业</span>
					<span v-if="scope.row.homeworkType=='1-2'">文件作业</span>
				</template>
			</el-table-column>
			<el-table-column prop="courseName" label="所属课程"></el-table-column>
			<el-table-column label="学员作业" width="140">
				<template slot-scope="scope">
					<el-button @click="handleWatch(scope.row)" v-if="scope.row.homeworkType=='1-1'">观看</el-button>
					<el-button @click="handleChakan(scope.row)" v-if="scope.row.homeworkType=='1-2'">查看</el-button>
					<el-button @click="handleDownload(scope.row)" class="red">下载</el-button>
				</template>
			</el-table-column>
			<el-table-column label="评论" width="100">
				<template slot-scope="scope">
					<el-button @click="handleComment(scope.row)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="fenyeMargin">
			<div class="pag_block">
				<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
			</div>
		</div>
		<div class="playerVideo" v-show="playerVideo">
			<a @click="playerClose" class="close">&#10005;</a>
			<video ref='video' controls autoplay>您的浏览器不支持 video元素。</video>
		</div>
		<div class="filePreview" v-show="filePreview">
			<div class="fileDiv">
				<a @click="fileClose" class="close">&#10005;</a>
				<iframe :src="fileUrl"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default{
		data(){
			return{
				updateTitle:'',
				userId:'',
				sort:'',
				tableData:[],
				playerVideo:false,
				filePreview:false,
				fileUrl:'',
				homeworkType:'',
				pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods:{
			getParams() {
				this.userId = this.$route.params.userId;
				this.updateTitle = this.$route.params.updateTitle;
				this.dataId = this.$route.params.dataId;
				this.identity = this.$route.params.identity;
				console.log(this.$route.params);
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/coursewareHomeworkCommit/studentCoursewareHomeworkCommitList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						userId:this.userId,
						page:this.currentpage,
						num:this.pagesize
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			
			userLubo(){
				this.$router.push({
					name: 'soTeacher',
					params: {
						userid: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			userLive(){
				this.$router.push({
					name: 'userLive',
					params: {
						userid: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			knowMap(){
				this.$router.push({
					name: 'userKnowledgeMap',
					params: {
						userId: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			userTask(){
				this.$router.push({
					name: 'userTask',
					params: {
						userId: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			handleComment(row){
				this.$router.push({
					name: 'userComment',
					params: {
						userId: this.userId,
						updateTitle:row.name
					}
				})
			},
			handleWatch(row){
				this.playerVideo = true;
				this.$refs.video.src = row.homeworkUrl;
			},
			playerClose(){
				this.playerVideo = false;
				this.$refs.video.src = '';
			},
			handleChakan(row){
//				this.filePreview = true;
				let sUrl = row.homeworkUrl;
				if (!/.(pdf|PDF)$/.test(sUrl)){
					this.fileUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + sUrl
				}else{
					this.fileUrl = sUrl
				};
				window.open(this.fileUrl);
			},
			handleDownload(row){
				let homeworkUrl = row.homeworkUrl;
				if(homeworkUrl!=null && homeworkUrl.indexOf("/") != -1){
					var fileName = homeworkUrl.substring(homeworkUrl.lastIndexOf("/")+1);
				};
				if (window.navigator.msSaveBlob) {
		          	try {
		            	window.navigator.msSaveBlob(blob, fileName)
		          	}catch (e) {
		            	console.log(e);
		          	}
		        }else {
					var downloadElement = document.createElement('a');
		          	downloadElement.href = homeworkUrl;
		          	downloadElement.target = '_blank';
		          	downloadElement.download = fileName; //下载后文件名
		          	document.body.appendChild(downloadElement);
		          	downloadElement.click(); //点击下载
		          	document.body.removeChild(downloadElement); //下载完成移除元素
		          	window.URL.revokeObjectURL(homeworkUrl); //释放掉blob对象
	           	};
				var url = homeworkUrl;
			    var xhr = new XMLHttpRequest();
			    xhr.open('get',url,'jsonp',true); 
			    xhr.responseType = "blob"; // 返回类型blob
			    xhr.onload = function() {
			        if(this.status == 200) {
				        var blob = this.response;
				        var href = window.URL.createObjectURL(blob);
	            	}
	        	};
	    		xhr.send()
			},
			reBack(){
				this.$router.push({
					name:'userManager',
					params: {
						identity:1,
						dataId:this.dataId
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getPageSearch(){
				this.currentpage=1;
				this.getTableList();
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted(){
			this.getParams();
			if(this.userId==null||this.updateTitle==null){
				this.$store.commit('GET_USERuserHomework');
				var s =this.$store.state.userHomework;
				this.userId=s.userId;
				this.updateTitle=s.updateTitle;
				this.identity = s.identity;
				this.dataId = s.dataId
			};
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					userId:this.userId,
					updateTitle:this.updateTitle,
					dataId:this.dataId,
					identity:this.identity
				};
				this.$store.commit('SET_USERuserHomework',s);
			});
		}
	}
</script>
<style type="text/css">
	.userHomework{padding-bottom: 100px;}
	.userHomework .advise{border: 1px solid #44CEF6;box-sizing: border-box;margin-left: 10px;}
	.userHomework .el-tabs-report a.listOne{position: relative;top: -1px;}
	.userHomework .el-table__row button{color: #44CEF6;}
	.userHomework .el-table .cell,.userHomework .el-table th div,.userHomework .el-table--border td:first-child .cell,.userHomework .el-table--border th:first-child .cell {padding:0;text-align:center;}
	.userHomework .el-button {border:0;padding:12px 16px;}
	.userHomework .el-button--mini,.studyMap .el-button--mini.is-round {padding:0;}
	.userHomework .el-button--mini {font-size:14px;}
	.userHomework .el-table__row:hover button{background: transparent;}
	.userHomework .el-table__row td button{padding: 0 7px;}
	
	.userHomework .playerVideo{width:442px;height:300px;padding:20px 20px 30px;position: fixed;top: 50%;left: 50%;margin-top: -150px;margin-left: -221px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.userHomework .playerVideo .close{color: #333;position: absolute;top: 8px;right: 10px;cursor: pointer;}
	.userHomework .playerVideo video{width:442px;height:250px;object-fit: fill;margin-top: 40px;}

	.userHomework .filePreview{width:800px;height:400px;padding:20px 20px 30px;position: fixed;top: 50%;left: 50%;margin-top: -200px;margin-left: -400px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.userHomework .filePreview .close{color: #333;position: absolute;top: 2px;right: 5px;cursor: pointer;}
	.userHomework .filePreview iframe{width:800px;height:400px;border: 1px solid #ccc;box-sizing: border-box;}
</style>